<template>
  <div class="grid grid-cols-2 h-screen overflow-x-hidden">
    <div
      class="col-span-2 order-2 p-10 md:col-span-1 md:order-1 bg-gradient-to-br from-blue-600 to-indigo-800"
    >
      <Transition appear enter-active-class="animate__animated animate__bounceInLeft animate__fast">
        <div class="flex justify-center items-center flex-col h-full">
          <img src="@/assets/images/login/ai.png" class="w-2/3" alt="ai" />
        </div>
      </Transition>
    </div>
    <div class="flex flex-col col-span-2 order-1 md:col-span-1 md:order-2 bg-white">
      <Transition
        appear
        enter-active-class="animate__animated animate__bounceInRight animate__fast"
      >
        <div class="flex flex-col flex-1">
          <div class="relative flex flex-col flex-1 p-30px overflow-x-hidden overflow-y-auto">
            <!-- 右上角的主题、语言选择 -->
            <div class="flex items-center justify-end">
              <DarkModeSwitch />
            </div>
            <div class="flex-1">
              <div class="flex-center mb10px">
                <img alt="" class="mr-10px h-40px w-40px" src="@/assets/logo.png" />
                <span class="text-30px font-bold">YIMIAN</span>
              </div>
              <component :is="formComponents[component]" v-model="component" />
            </div>
            <div class="py-2.5 text-sm text-center">
              Copyright © 2025 苏州逸勉网络科技有限公司 All Rights Reserved.
              <a class="text-blue hover:text-blue" href="http://beian.miit.gov.cn/" target="_blank"
                >苏ICP备2025189227号-1</a
              >
            </div>
          </div>
        </div>
      </Transition>
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
import DarkModeSwitch from '@/components/DarkModeSwitch/index.vue'
import { ref } from 'vue'
defineOptions({
  name: 'LoginPage',
})
const component = ref('login') // 切换显示的组件
const formComponents = {
  login: defineAsyncComponent(() => import('./components/Login.vue')),
  register: defineAsyncComponent(() => import('./components/Register.vue')),
  resetPwd: defineAsyncComponent(() => import('./components/ResetPwd.vue')),
}
</script>

<style lang="scss" scoped></style>
